<template>
  <div class="myAssetsHome">
    <header-btn  :btnList='record_list_data' :tabIndex='tabIndex' @changetabIndex='tabIndexChange'/>
    <!-- 记录列表 -->
    <div class="myAssetsContent" v-if="tabIndex>1 && tabIndex !=7">
        <div class="table-vue">
             <assembly-Integration :formInline='formInline' :btnList="btnList" @search="onSubmit" @btnListClick="btnListClick" />
            <lpj-table-vue :baseNum='paginationMes.per_page*(paginationMes.current_page-1)'  :tableHeaderData="tableHeaderData[tabIndex-1]" :tableData="tableData" @linkBtnFn="linkBtnFn"></lpj-table-vue>
        </div>
        <pagination align="right" v-if="paginationMes.total&&paginationMes.total>10"  :paginationMes="paginationMes" @sizeChangeFn="sizeChangeFn" @currentChangeFn="currentChangeFn"></pagination>
    </div>
    <!-- 资产列表 -->
    <div class="myAssetsContent" v-if="tabIndex == 1">
        <div class="table-vue">
            <assembly-Integration :formInline='formInline' :btnList="btnList" @search="onSubmit" @btnListClick="btnListClick" />
            <lpj-table-vue :baseNum='paginationMes.per_page*(paginationMes.current_page-1)'  :tableHeaderData="tableHeaderData[tabIndex-1]" :tableData="assetsDataList" @linkBtnFn="linkBtnFn"></lpj-table-vue>
        </div>
        <pagination align="right" v-if="paginationMes.total&&paginationMes.total>10"  :paginationMes="paginationMes" @sizeChangeFn="sizeChangeFn" @currentChangeFn="currentChangeFn"></pagination>
    </div>
    <el-row v-if="tabIndex==0" class="myAssetsContent" style="height: 100%;">
   </el-row>
    <el-row v-if="tabIndex==7" class="myAssetsContent" style="height: 100%;">
       <div class="noticeBox">
          <div class="leftContent">
              <span class="noticIcon">!</span>
          </div>
          <div class="rightContent">
               <div class="msg">1.系统检测到在钉钉组织架构中，您同时拥有多个部门，这会影响到个人名下资产不知该归属到哪个部门的问题，造成统计报表数据不准确。</div>
               <div class="msg">2.因此您需要根据实际情况选择一个部门作为您的主部门。</div>
               <div class="msg">3.主部门允许1个月更换一次。</div>
           </div>
       </div>
       <div class="department">
        <el-form ref="form" style="width: 340px;" label-position="right" label-width="150px">
          <el-form-item label="您当前的主部门为：">
            财务部
          </el-form-item>
          <el-form-item label="修改主部门：">
            <el-select  v-model="form.region" placeholder="请选择" style="width: 191px;height: 30px;">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item style="float: right;">
            <el-button type="primary" style="width: 98px;height: 30px;line-height: 10px;">提交</el-button>
            <el-button palin style="width: 70px;height: 30px;line-height: 10px;">取消</el-button>
          </el-form-item>
        </el-form>
       </div>
    </el-row>
    <!-- 报表  -->
   <!-- <report-form ref="reportForm"  v-if="tabIndex==5"></report-form> -->
    <dialog-vue :noTurnMe='true' :wh_id='wh_id' :dialogTitle="dialogTitle" :dialogVisible="dialogVisible" @dialogVisibleChangeFn="dialogVisibleChangeFn" :ruleForm="ruleForm"  @goCancel="goCancel"  @goSubmit="goSubmit">
    </dialog-vue>
    <!-- <div v-show="isShow" class="helpbox">
        <p>{{ helpmsg[0].title }}</p>
        <div v-html="helpmsg[0].content"></div>
    </div> -->
  </div>
</template>
<script>
/* eslint-disable */
/*******获取我的资产列表       报修               转移                退还                报失                 删除报修信息 撤销报修信息  编辑报修信息 撤销转移       确认转移         撤销退还     删除退还记录   撤销报失   删除报失*/
import {getMyAssetsListApiFn,repairsAssetsApiFn,transferAssetsApiFn,sendBackAssetsApiFn,disposeAssetsApiFn,removeRepair,revokeRepair,editRepair,revokeTransfer,confirmTransfer,revokeReturn,removeReturn,revokeLoss,removeLoss,
/**领取记录        转移记录             报修记录          退还记录             报失记录 */
getReceiveRecord, getTransferRecord , getRepairsRecord , getSendBackRecord ,getMyLossRecord} from "./api"
import DialogVue from "@/components/DialogVue"
import Pagination from "@/components/Pagination"
import LpjTableVue from "@/components/LpjTableVue"
import headerBtn from "@/components/headerBtn"
import reportForm from "./components/myReportForm"
import constObj from '@/config/const' /**表头常数 */
import HeadSearchBox from '@/components/HeadSearchBox' /*头部搜索*/
import assemblyIntegration from "@/components/assemblyIntegration"/** 新版搜索框 */

export default {
  name: "myAssets",
  components:{ DialogVue, Pagination, LpjTableVue,headerBtn ,reportForm,HeadSearchBox,assemblyIntegration},
  data() {
    return {
      /**头部记录信息 */
      record_list_data:[
          {num:'',content:'我的数据'}, 
          {num:'',content:'资产列表'}, 
          {num:'',content:'领用记录'},
          {num:'',content:'报修记录'},
          {num:'',content:'转移记录'},
          {num:'',content:'退还记录'},
          {num:'',content:'报失记录'},
          {num:'',content:'设置主部门'}
	  ],
      tabIndex:0,
      tableHeaderData:constObj.tableHeaderOfmyAsset,
      tableData:[],/*table里的数据 */
      paginationMes:{per_page:10,current_page:1,totol:0}, /*分页 数据*/
      assetsDataList:[{}], /**资产数据 */
      operation_list:['报修','转移','退还','报失'],/**操作选项 */
      assets_img_height:220, /**资产图片高度 */
      assets_img_height_once:true, /**资产图片高度第一次渲染 */
      dialogTitle: '',/*领用弹框头部*/
      dialogVisible: false,/*是否显示领用弹框*/
      myAssetsContent_noData_OnOff:false, /**控制没有资产时显示内容 */
      wh_id:'', 
      isShow: false,
      ruleForm: {
          formList: [],
          addForm:[]
      },/*领用表单*/
      helpmsg: [
      	{
      		title: '我的资产：',
      		content: `
      			<div>使用方式为【个人使用】的资产归属【我的资产】，属员工个人专用。比如：电脑设备、办公桌椅等其他个人专用物品。领用后在【我的资产】里查询记录。</div>
      		`
      	},
      ],
      formInline:[ /**搜索框 */
          {type:'input',value:'f_name',label:'资产名称',placeholder:'请输入内容',hide:false},
          {type:'input',value:'f_code',label:'资产编码',placeholder:'请输入内容',hide:false},
          {type:'daterange',value:'time',label: '领用时间',hide:false},
      ],
      btnList:[
          {
              type:'batchTransfer',
              label:'批量转移'
          },
          {
              type:'batchTakeBack',
              label:'批量退还'
          },
      ],
      form:{f_name:'',time:[], f_code:'', f_cid:'', c_status:'',departments:'',users:'',wh_id:'',start_time:'',end_time:''},/**搜索框form */
    };
  },
  created() {
    this.tabIndex = Number(localStorage.curTabIndex||0)
    this.getTable();
  },
  methods: {
     /**查询 */
     onSubmit(form,user,dept) {
         this.userArr = user
         this.deptArr = dept
         this.paginationMes.current_page = 1
         this.form = {
             ...this.form,
             ...form
         }
         this.getTable();
     },
     btnListClick(item){
       console.log(item,'item')
       switch(item.type){
           case 'batchTransfer': // 批量转移
           console.log(item.label)
           break;
           case 'batchTakeBack': // 批量收回
           console.log(item.label)
           break;
       }
    },
    /**切换tabIndex */
    tabIndexChange(index){
      this.tabIndex = index
      localStorage.curTabIndex = index
      this.paginationMes={per_page:10,current_page:1,totol:0}, /*分页 数据*/
      this.getTable()
    },
    /**获取table数据 */
    getTable(){
      let promise
      let params = {page:this.paginationMes.current_page,num:this.paginationMes.per_page,...this.form}
      switch(this.tabIndex){
        case 0: this.getDataFn();break; //领用
        case 1: promise=getReceiveRecord(params);break; //领用
        case 2: promise=getRepairsRecord(params);break;//保修
        case 3: promise=getTransferRecord(params);break;//转移
        case 4: promise=getSendBackRecord(params);break;//退还
        case 5: promise=getMyLossRecord(params);break;//报失
      } 
      promise?promise.then(res=>{
        this.tableData = res.data
        this.paginationMes={per_page:Number(res.per_page),total: res.total,current_page:Number(res.current_page)}
      }):''
    },
    /**table操作 */
    // linkBtnFn(label,val){
    //   switch(label+this.tabIndex){
    //     case '报修':this.$router.push({name:"requireRepairDetail",query:{key:val.id, param: this.$route.meta.title}});break;
    //     case '编辑2':this.toLinkEditRepairFn(val);break;/**报修2 */
    //     case '撤销2':this.toLinkEditFn(val,val.rp_status==4?"删除":'撤销','报修');break; /**删除或撤销报修 */
    //     case '请您确认3':this.toLinkEditFn(val,label,'转移');break;/**确认转移 */
    //     case '撤销3':this.toLinkEditFn(val,label,'转移');break; /**撤销转移 */
    //     case '撤销4':this.toLinkEditFn(val,label,'退还');break; /**撤销退还 */
    //     case '删除4':this.toLinkEditFn(val,label,'退还');break; /**删除退还 */
    //     case '撤销5':this.toLinkEditFn(val,label,'报失');break; /**撤销报失 */
    //     case '删除5':this.toLinkEditFn(val,label,'报失');break; /**删除报失 */
    //   }
    // },
   linkBtnFn(val,data){
       switch (val) {
           case "报修":this.$router.push({ name:'requireRepairDetail',query:{key:val.id, param: this.$route.meta.title}});break;
           case "转移":this.toLinkTransferFn(val,data); break;
           case "退还":this.toLinkReturnFn(val,data); break;
           case "报失": this.toLinkScrapFn(val,data);break;
           case "详情": this.goAssetsDetails(val,data);break;
           case "编辑": this.toLinkEditRepairFn(val,data);break;
           case "撤销": this.toLinkEditFn(data,val,"报修");break;
           case "删除": this.toLinkEditFn(data,val,'退还');break;
       }
   },
    /**改变页码 */
    currentChangeFn(val){
      this.paginationMes.current_page = val 
      this.getTable()
    },
    /**改变每页条数 */
    sizeChangeFn(val){
      this.paginationMes.current_page = 1
      this.paginationMes.per_page = val 
      this.getTable()
    },
    /**前往详情页 */
    goAssetsDetails(item){
      log(item,4444)
      this.$router.push({name:"assetDetail",query:{id:item.id,name:this.$route.meta.title}})
    },
    /**获取资产数据 */
    getDataFn(){
      getMyAssetsListApiFn({asset_status:0}).then(res=>{
        if(res){
                this.assetsDataList = res
                if(res.length>0){this.myAssetsContent_noData_OnOff = false}
                this.assetsDataList.forEach(item=>{
                  item.status = ['正常','报修中','转移中','退还中','报失中'][item.re_other_status]
                })
            }
      })
    },
    /**点击浮窗的操作按钮 */
    assetsOperation(opt,obj){
        switch (opt) {
            case '转移': this.toLinkTransferFn(obj);break;
            case '报失': this.toLinkScrapFn(obj);break;
            case '报修': this.toLinkRepairFn(obj);break;
            case '退还': this.toLinkReturnFn(obj);break;
            default:break;
        }
      // } 
    },
    /*获取用户所在的部门树*/
    getDepartOption(res,rej){
        getAllDepartmentsApi().then(resp=>{
                res(resp)
        })
    },
    /*报失功能*/
    toLinkScrapFn(val){
            this.ruleForm.formList = [
              { type: 'textarea', name:'lo_reason', label: '报失原因', placeholder: '请输入报失原因', className: 'two', formValue: '',rules:[{ required: true, message: '请输入报失原因', trigger: 'blur' }]}
            ]
            this.ruleForm.addForm = [
              {name:'re_id',formValue:val.re_id},
              {name:'lo_a_id',formValue:val.id}
            ]
 
            this.dialogTitle = '资产报失'
            this.dialogVisible = true
    },
    /*转移功能*/
    toLinkTransferFn(val){
            this.wh_id = String(val.wh_id)
            this.ruleForm.formList = [
              { type: 'pick',name:'ts_type', label: '选择转移后使用方式',check1: '个人使用',check2: '部门使用',formValue:1,rules:[{ required: true}]},
              { type: 'textarea', name:'ts_reason', label: '转移原因', placeholder: '请输入转移原因', className: 'two', formValue: '',rules:[{ message: '请输入转移原因', trigger: 'blur' }]},
            ]
            this.ruleForm.addForm = [
              {name:'re_id',formValue:val.re_id},
              {name:'ts_a_id',formValue:val.id},
              // {name:'users',formValue:''},
              // {name:'departments',formValue:''},
            ]
            this.dialogTitle = '资产转移'
            this.dialogVisible = true
    },
    /*报修功能*/
    toLinkRepairFn(val){
            this.ruleForm.formList = [
              { type: 'textarea', name:'rp_reason', label: '报修原因', placeholder: '请输入报修原因', className: 'two', formValue: '',rules:[{ required: true, message: '请输入报修原因', trigger: 'blur' }]},
              { type: 'upload',name:'rp_ri_url', label: '图片', limitNum: 6,formValue:[],rules:[{ required: true, message: '请上传报修图片', trigger: 'change',type: 'array', }]}
            ]
            this.ruleForm.addForm = [
              {name:'re_id',formValue:val.re_id},
              {name:'rp_a_id',formValue:val.id}
            ]
            this.dialogTitle = '资产报修'
            this.dialogVisible = true
    },
    toLinkEditFn(val,label,action){
          this.$confirm(`即将${label+action}"${val.f_name}", 是否继续?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
              let param = {id:val.id}
              let promise
              switch(label+action){
                case '撤销报修':promise=revokeRepair(param);break;
                case '删除报修':promise=removeRepair(param);break;
                case '请您确认转移':promise=confirmTransfer(param);break;
                case '撤销转移':promise=revokeTransfer(param);break;
                case '撤销退还':promise=revokeReturn(param);break;
                case '删除退还':promise=removeReturn(param);break;
                case '撤销报失':promise=revokeLoss(param);break;
                case '删除报失':promise=removeLoss(param);break;
              }
              promise.then(res=>{
                    this.getTable()
                });
            });
    },
    /**编辑报修功能 */
    toLinkEditRepairFn(val){
            let img = val.image&&val.image.length?val.image.map(item=>{return item.ri_url}):[]
            this.ruleForm.formList = [
              { type: 'textarea', name:'rp_reason', label: '报修原因', placeholder: '请输入报修原因', className: 'two', formValue: val.rp_reason,rules:[{ required: true, message: '请输入报修原因', trigger: 'blur' }]},
              { type: 'upload',name:'rp_ri_url', label: '图片', limitNum: 6,formValue:img,rules:[{ required: true, message: '请上传报修图片', trigger: 'change',type: 'array', }]}
            ]
            this.ruleForm.addForm = [
              {name:'id',formValue:val.id},
            ]
            this.dialogTitle = '编辑资产报修'
            this.dialogVisible = true
    },
    /*退还功能*/
    toLinkReturnFn(val){
           this.ruleForm.formList = [
              { type: 'textarea', name:'ret_reason', label: '退还原因', placeholder: '请输入退还原因', className: 'two', formValue: '',rules:[{ required: true, message: '请输入退还原因', trigger: 'blur' }]},
              { type: 'upload',name:'ret_ri_url', label: '图片', limitNum: 6,formValue:[],rules:[{ required: true, message: '请上传退还图片', trigger: 'change',type: 'array', }]}
            ]
            this.ruleForm.addForm = [
              {name:'re_id',formValue:val.re_id},
              {name:'ret_a_id',formValue:val.id}
            ]

        this.dialogTitle = '资产退还'
        this.dialogVisible = true
    },
    /**控制是否显示弹窗 */
    dialogVisibleChangeFn(val){
        this.dialogVisible = val
        if(!val){
            this.ruleForm.formList=[]
        }
    },
    /**弹窗取消按钮 */
    goCancel(){
      this.dialogTitle = '' 
      this.dialogVisible = false
      this.ruleForm = {formList:[],addForm:[]}
    },
    // /*监听资产领用弹窗点击确定*/
    goSubmit(e,users,departments,dept_id){
        let promise
        switch(this.dialogTitle){
            case "资产报失":
               promise = disposeAssetsApiFn(e); break;
            case "资产转移":let params = e;params.append('users',JSON.stringify(users));params.append('departments',JSON.stringify(departments));params.append('dept_id',dept_id);
                promise = transferAssetsApiFn(params);break;
            case "资产报修":
                promise = repairsAssetsApiFn(e);break;
            case "资产退还":
                promise = sendBackAssetsApiFn(e);break;
            case "编辑资产报修":
                promise = editRepair(e);break;
        }
        promise.then((res)=>{
            this.goCancel()
            this.$store.commit('changeDisabled', false)
            this.getTable();
        }).catch(err=>{
            this.$store.commit('changeDisabled', false)
        })
    },
    showmsg() {
    	if(this.isShow){
    		this.isShow = false;
    	}else {
    		this.isShow = true;
    	}
    }
  },
};
</script>
<style lang="stylus" scoped>
.myAssetsHome
  font-family "SourceHanSansCN-Regular"
  height 100%
  font-size 14px
  color #303133 
  .helpbox
      position absolute;
      left: 405px;
      top: 209px;
      width: 388px;
      height: 159px;
      line-height: 20px;
      border-radius: 2px 2px 2px 2px;
      background-color: rgba(250, 250, 250, 1)
      text-align: center;
      box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.3);
      border: 1px solid rgba(255, 0, 0, 0);
      padding 16px 17px 12px 24px;
      box-sizing border-box;
      animation: show 1s;
      >p
        color: rgba(0, 0, 0, 0.54);
        margin-bottom 10px;
        font-size: 14px;
        text-align: left;
        font-family: Helvetica-regular
      >div
        color: rgba(0, 0, 0, 0.54);
        font-size: 14px;
        text-align: left;
        font-family: Helvetica-regular;
      >p:nth-of-type(1)
        font-weight bold;
  .myAssetsContent
    margin 10px 0
    background-color #fff
    padding 20px
    .title
      width: 100%;
      height: 60px;
      background-color rgba(247, 243, 251, 1)
      padding 18px 0 18px 20px
      box-sizing border-box
      margin-bottom 22.5px
      cursor pointer
      .titleSpan
         font-size 16px
         line-height 24px
         font-family SourceHanSansSC-regular
         color rgba(128, 128, 128, 1)
      .question
         width: 15px;
         height: 15px;
         border 1px solid rgba(128, 128, 128, 1)
         font-size 10px
         border-radius 15px
         display inline-block
         color rgba(128, 128, 128, 1)
         line-height 13px
         box-sizing border-box
         text-align center
         margin-left 9px
    .noticeBox
        width: 98%;
        min-height 109px
        background-color rgba(252, 241, 240, 1)
        display flex
        padding 21px 40px
        box-sizing border-box
        font-size 13px
        .leftContent
          flex 1
          .noticIcon
            width: 20px;
            height: 20px;
            border-radius 50%
            display block
            background-color red
            color #fff
            text-align center
            font-weight bold
            line-height 20px
            float right
            margin-right 21px
        .rightContent
          flex 20
          div
            line-height 20px
            margin-bottom 7px
            color #FF6167
          div:first-child
            color #000000
    .department 
         margin-top 20px
         font-size 14px
    .myAssetsContent_noData
      padding 20px 10px
      .myAssetsContent_noData_text
        font-size 18px
        line-height 100px
        text-align center
        color #ccc
    .assets_list
      background-color: rgba(247, 247, 251, 1);
      text-align: center;
      border: 1px solid rgba(255, 255, 255, 0);
      display inline-block
      width 180px
      height: 338px;
      margin 7.5px 15px 7.5px 0
      &:hover .assets_list_card
        cursor pointer
      .assets_list_card
        background-color: rgba(247, 247, 251, 1);
        .operation_item
          width 100% 
          height 36px
          position absolute 
          left 0
          bottom -36px
          transition 0.5s
          background rgba(0, 0, 0, 0.5)
          .operation_item_name
            box-sizing border-box
            float left 
            width 25%
            height 24px
            line-height 24px
            margin-top 6px
            border-right 1px solid rgba(255, 255, 255, 0.28)
            color #fff
          &:hover .operation_item
            bottom 0px
        .assetbox
          padding 10px 12px 20px 12px
          .assets_name
            line-height 20px;
            color: rgba(16, 16, 16, 1);
            font-size: 14px;
            text-align: left;
            margin-bottom 10px
            border-bottom 1px solid rgb(238,238,238)
            padding-bottom 10px
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
            word-break break-all
          .assets_id
            float: left
            width 100%
            line-height 24px;
            color: rgba(149, 149, 149, 1);
            font-size: 12px;
            text-align: left;
          .operation_btn
            display flex
            padding 17px 0 4px 0
            width 100%
            justify-content space-between
            >>>span
             font-size 12px
          .redClass
            color: rgba(249, 16, 16, 1);
            border: 1px solid rgba(249, 16, 16, 1); 
</style>
<style lang="stylus">
.myAssetsHome
  .operation_btn
    .el-button--primary
        width: 33px;
        height: 20px;
        line-height 14px
        text-align center
        padding 2px 2px
        border-radius: 4px;
        background-color: rgba(255, 255, 255, 0);
        text-align: center;
        font-family: Microsoft Yahei;
        color: rgba(10, 142, 255, 1);
        border: 1px solid rgba(10, 142, 255, 1);
</style>